.taskDetail {
  .detailTime {
    padding: 0 20px;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e0e0e0;
    height: 90px;
    .detailTimeIcon {
      font-size: 36px;
      i {
        display: block;
      }
      .icon-watch_later {
        color: #bdbdbd;
      }
      .icon-go_out {
        color: #2196f3;
      }
      .icon-check_circle {
        color: #30af00;
      }
    }
    .detailTimeLabel {
      width: 90px;
    }
    .detailTimeMs {
      color: #757575;
    }
    .detailTimeNoSet {
      color: #9e9e9e;
    }
    .detailTimeDate:hover {
      color: #2196f3;
    }
    .detailTimeLines {
      height: 0;
      width: 100%;
      border-top: 3px dashed #ddd;
      position: relative;
      margin: 8px 0;
      .detailTimeLine {
        position: absolute;
        top: -3px;
        border-width: 0;
        border-style: dashed;
        border-top-width: 3px;
      }
      .detailTimeLine-blue {
        border-top-color: #2196f3;
        border-style: solid;
      }
      .detailTimeLine-green {
        border-top-color: #30af00;
        border-style: solid;
      }
      .detailTimeLine-red {
        border-top-color: #ff0000;
        border-style: solid;
      }
      .detailTimeLine-yellow {
        background: #f5f5f5;
        border-top-color: #ffa414;
      }
      .detailTimeLineToday {
        height: 9px;
        width: 3px;
        border-width: 0;
        border-style: solid;
        border-color: transparent;
        position: absolute;
        top: -6px;
        margin-left: -3px;
        span {
          background: #2196f3;
          height: 9px;
          width: 3px;
          vertical-align: top;
          display: inline-block;
        }
      }
    }
    .detailTimeNowStart {
      height: 22px;
      line-height: 22px;
      box-sizing: border-box;
      padding: 0 8px;
      border-radius: 19px;
      border-width: 1px;
      border-style: solid;
    }
    .detailTimeRealMs {
      color: #9e9e9e;
      height: 22px;
      line-height: 22px;
    }
    .detailTimeRealColor {
      color: #757575;
    }
    .detailTimeRealLine:hover {
      border-bottom: 1px solid #757575;
    }
    .detailTimeRealStartColor {
      color: #ffa414;
      &.detailTimeRealLine:hover {
        border-bottom: 1px solid #ffa414;
      }
    }
    .detailTimeRealBold {
      font-weight: 600;
    }
    .detailTimeRealEndColor {
      color: #ff0000;
      &.detailTimeRealLine:hover {
        border-bottom: 1px solid #ff0000;
      }
    }
    .mui-datetime-base {
      line-height: 22px;
    }
  }
}
